<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from 'echarts'
import resize from '../mixins/resize'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart',
    },
    width: {
      type: String,
      default: '100%',
    },
    height: {
      type: String,
      default: '350px',
    },
    autoResize: {
      type: Boolean,
      default: true,
    }
  },
  data() {
    return {
      chart: null,
    }
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val)
      },
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      this.setOptions(this.chartData)
    },
    setOptions({ expectedData, actualData } = {}) {
      this.chart.setOption({
        color: ['rgb(90,177,239)'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999',
            },
          },
        },
        toolbox: {
          x: 'right',
          bottom: 20,
          feature: {
            // dataView: { show: true, readOnly: false },
            // magicType: { show: true, type: ['line', 'bar'] },
            // restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        grid: {
          left: 10,
          right: 10,
          bottom: 60,
          top: 40,
          containLabel: true,
        },
        color: [
          'rgb(92,123,217)',
          'rgb(145,204,117)',
          'rgb(250,200,88)',
          'rgb(238,102,102)',
          'rgb(115,192,222)',
        ],
        legend: {
          type: 'scroll', // 设置图例翻页
          // itemWidth: 12, // 图例图形宽度
          // itemHeight: 10,
          orient: 'horizontal', // 图例横向排布
          // data: title, // title是一个列表，存着图例的数据
          // 图例位置
          right: 40,
          bottom: 20,
          textStyle: {
            color: '#000',
            fontSize: 12,
          },
          pageIconColor: '#000',
          pageTextStyle: {
            color: '#000',
          },
          itemGap: 20,
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '65%',
            label: {
              normal: {
                show: false,
                position: 'inside',
                formatter: '{b}:{d}%',
              },
            },
            data: [
              { value: 1048, name: '东莞市新能源科技有限公司' },
              { value: 735, name: '镇江电子材料科技' },
              { value: 580, name: '广东市机械加工公司' },
              { value: 484, name: '深圳华为有限公司' },
              { value: 300, name: '小米有限公司' },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
              label: {
                show: true,
                fontSize: '18',
                color: '#000',
              },
            },
          },
        ],
      })
    },
  },
}
</script>
